@using AntDesign.Charts

<Table DataSource="datas">
    <PropertyColumn Property="c=>c.id"></PropertyColumn>
    <AntDesign.Column TData="string">
        <TinyColumn Data="@context.trend" Config="trendConfig"></TinyColumn>
    </AntDesign.Column>
    <AntDesign.Column TData="string">
        <TinyLine Data="@context.times" Config="timesConfig"></TinyLine>
    </AntDesign.Column>
    <AntDesign.Column TData="string">
        <RingProgress Data="@context.load" Config="loadConfig"></RingProgress>
    </AntDesign.Column>
</Table>

@code{

    readonly List<DataItem> datas = new List<DataItem>
    {
        new DataItem {id = "local-001"},
        new DataItem {id = "local-002"},
        new DataItem {id = "local-003"},
        new DataItem {id = "local-004"},
        new DataItem {id = "local-005"}
    };

    protected override Task OnInitializedAsync()
    {
        var r = new Random();
        datas.ForEach(x =>
        {
            for (var i = 0; i < 10; i++)
            {
                x.trend.Add(new DataValue {index = i.ToString(), value = r.Next(10, 1000)});
            }
            for (var i = 0; i < 20; i++)
            {
                x.times.Add(new DataValue {index = i.ToString(), value = r.Next(200, 400)});
            }
            x.load = r.NextDouble();
        });

        return base.OnInitializedAsync();
    }

    readonly TinyColumnConfig trendConfig = new TinyColumnConfig
    {
        Width = 200,
        Height = 50,
        XField = "index",
        YField = "value",
        Annotation = new []
        {
            new LineAnnotation()
            {
                Type = Annotation.TypeLine,
                Start = new object[] { "min", "median" },
                End = new object[] { "max", "median" },
                Text = new AnnotationTextCfg
                {
                    Content = "中位数",
                    OffsetY = -2,
                    Style = new TextStyle()
                    {
                        TextAlign = TextStyle.TextAlignLeft,
                        FontSize = 10,
                        Fill = "rgba(44, 53, 66, 0.45)",
                        TextBaseline = TextStyle.TextBaselineBottom
                    }
                },
                Style = new GraphicStyle()
                {
                    Stroke = "rgba(0, 0, 0, 0.25)",
                    LineWidth = 2
                }
            },
        }
    };

    readonly TinyLineConfig timesConfig = new TinyLineConfig
    {
        Width = 200,
        Height = 50,
        XField = "index",
        YField = "value",
        Annotation = new []
        {
            new LineAnnotation()
            {
                Type = Annotation.TypeLine,
                Start = new object[] { "min", "mean" },
                End = new object[] { "max", "mean" },
                Text = new AnnotationTextCfg()
                {
                    Content = "平均值",
                    OffsetY = -2,
                    Style = new TextStyle()
                    {
                        TextAlign = TextStyle.TextAlignLeft,
                        FontSize = 10,
                        Fill = "rgba(44, 53, 66, 0.45)",
                        TextBaseline = TextStyle.TextBaselineBottom
                    }
                },
                Style = new GraphicStyle()
                {
                    Stroke = "rgba(0, 0, 0, 0.25)",
                    LineWidth = 2
                }
            },
        }
    };

    readonly RingProgressConfig loadConfig = new RingProgressConfig
    {
        Width = 50,
        Height = 50
    };

    public class DataItem
    {
        public string id { get; set; }
        public List<DataValue> times { get; set; } = new List<DataValue>();
        public List<DataValue> trend { get; set; } = new List<DataValue>();
        public double load { get; set; }
    }

    public class DataValue
    {
        public string index { get; set; }
        public int value { get; set; }
    }

}